<template>
  <div>
    <van-search placeholder="请输入搜索城市"
                v-model.lazy="value"
                @change="onSearch"/>
    <van-cell-group v-show="!isShow">
      <van-cell
        v-for="(item,index) in searchCity"
        :key="index"
        size="large"
        :title="item.location"
        :lat="item.lat"
        :lon="item.lon"
        @click="onBack(item.location,item.lat,item.lon)"
      />
    </van-cell-group>
    <div class="hot-tit">我的城市</div>
    <van-row>
      <van-col span="6" custom-class="city-col"
               @click="onBack(item.name,item.lat,item.lon)"
               v-for="(item,index) in myCity"
               :key="index" class="list" tag="span">
        <span>{{item.name}}</span>
        <!--<van-icon name="clear" color="red" size="14px"-->
                  <!--custom-class="icon-clear" @click="onRemove(item.name)"/>-->
      </van-col>
    </van-row>
    <div v-show="isShow">
      <div class="hot-tit">热门城市</div>
      <van-row>
        <van-col span="6"
                 @click="onBack(item.location,item.lat,item.lon,1)"
                 v-for="(item,index) in listCity"
                 :key="index" class="list" tag="span">
          <span :class="{blue:item.isColor}">{{item.location}}</span>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
  const db = wx.cloud.database()
  const url = 'https://search.heweather.com/'
  export default {
    data () {
      return {
        key: '8c6dce5bf6b34cce81c0fb3ee9098b35',
        listCity: [],
        searchCity: [],
        myCity: [],
        value: '',
        isShow: true
      }
    },
    methods: {
      onRemove (name) {
        // 删除我的城市中某一项
        db.collection('city').doc(name).remove({
          success (res) {
          }
        })
      },
      onSearch: function (event) {
        this.value = event.mp.detail
        this.onFind(event.mp.detail)
      },
      onFind (name) {
        let self = this
        this.onAjax(url + 'find',
          {
            location: name,
            key: self.key,
            group: 'cn'
          },
          function (res) {
            if (res.statusCode === 200) {
              self.isShow = false
              self.searchCity = res.data.HeWeather6[0].basic
            }
          })
      },
      onAjax (url, data, callback) {
        // 公共ajax调用
        wx.request({
          url: url,
          data: data,
          success: function (res) {
            callback(res)
          },
          error (res) {
            // console.log(res)
          }
        })
      },
      onBack (title, lat, lon, type) {
        let newCityDate = []
        let self = this
        this.$store.commit('cityChoice', {title: title, lat: lat, lon: lon})
        if (type) {
          this.onUpdate(function (res) {
            if (res.data.length > 0) {
              for (let i = 0; i < res.data.length; i++) {
                newCityDate.push(res.data[i].name)
              }
            }
            if (newCityDate.indexOf(title) === -1) {
              self.onAdd(title, lat, lon)
            }
          })
        }
        wx.navigateBack({url: '../weather/main'})
      },
      onAdd (name, lat, lon) {
        // 新增city集合选中数据
        db.collection('city').add({
          // data 字段表示需新增的 JSON 数据
          data: {
            name: name,
            lat: lat,
            lon: lon
          },
          success: function (res) {
            // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
            // console.log(res)
          }
        })
      },
      onUpdate (callback) {
        // 获取城市city集合中的数据
        db.collection('city').get({
          success: function (res) {
            callback(res)
          }
        })
      },
      onUpList (options) {
        let self = this
        let data = options || ''
        /* 我的城市  */
        this.onUpdate(function (res) {
          if (res.data.length > 0) {
            self.myCity = (res.data)
            for (let i = 0; i < self.listCity.length; i++) {
              self.listCity[i].isColor = false
              for (let j = 0; j < self.myCity.length; j++) {
                // 给选中的城市加上颜色
                if (self.myCity[j].name === self.listCity[i].location) {
                  self.listCity[i].isColor = true
                }
              }
            }
          } else {
            self.onAdd(data.name, data.lat, data.lon)
          }
        })
      }
    },
    onLoad (options) {
      let self = this
      this.isShow = true
      this.value = ''
      this.searchCity = []
      self.myCity = []
      self.myCity.push(options)
      /* 热门城市 */
      self.onAjax(url + 'top',
        {
          group: 'cn',
          key: self.key,
          number: 20
        },
        function (res) {
          if (res.statusCode === 200) {
            self.listCity = res.data.HeWeather6[0].basic
            /* 更新我的城市 */
            self.onUpList(options)
          }
        })
    }
  }
</script>

<style >
.hot-tit{
  line-height: 40px;
  font-weight: bold;
  font-size: 13px;
  padding: 0 16px;
}
.list{
  text-align: center;

}
.list .van-col{
  margin-bottom: 20px;
}
.list ._span {
  background: #FAF9F8;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 6px 18px;
  font-size: 16px;
}
.list .blue{
    color: #fff;
    background: #59bcf9;
  }
.list .city-col{
  position: relative;
}
.list .icon-clear{
  position: absolute;
  top:-7px;
  right:11px;
  z-index: 99;

}
</style>
